<template>
  <view >
    <u-search v-model="searchTitle" height="70" :clearabled="false" :show-action="false" margin="10rpx 20rpx 0rpx" @search="search"></u-search>
         <u-tabs :list="list" :is-scroll="false" :current="current" @change="change" bar-width="150"></u-tabs>
    

<!-- <DaDropdownVue2 
      :dropdownMenu="dropdownMenuList"
      @confirm="handleConfirm"
      @close="handleClose"
      @open="handleOpen"
      @param="selectParam"
      :fixedTop="true"
      >
    </DaDropdownVue2> -->
    
    <z-paging ref="paging" v-model="lists" @query="queryList" :fixed="false" height="86vh" :refresher-enabled="false" v-show = "current == 0" >
    
     			<uni-list>
 <uni-list-item   v-for="(item, index) in lists" :key="index" 
     @click="navto(item)" :clickable="true"    direction="column"  style="height: 120rpx;"
       >  

       		<template v-slot:body >
            <!-- <view style="font-size: 32rpx;" >{{item.claName}}</view> -->
            <u-cell-item :title="item.claName+''" :titleStyle="{fontSize : '35rpx'}"   icon="bell"  :arrow="false" :border-bottom="false" style="right: 35rpx;height: 30rpx;" hover-class = "none"
             :iconStyle="{color:  '#000000'}"
            ></u-cell-item>
       		</template>
          <template v-slot:footer  >
            <u-cell-item :title="'学生人数：'+ item.capacity +'人'"    icon="account-fill"  :arrow="false" :border-bottom="false" style="right: 35rpx;height: 30rpx;" hover-class = "none"
             :iconStyle="{color:  '#ffaa00'}"
            >
                       <u-cell-item :title="'课程：'+ item.coursename+''"    icon="bookmark"    :arrow="false" :border-bottom="false" style="left: 30rpx;height: 30rpx;"    :iconStyle="{color:  '#66CCCC'}" hover-class = "none"></u-cell-item>
              
              
            </u-cell-item>

       <!--      <u-cell-item :title="'课程：'+ claTime.courseName+''"   :arrow="false" :border-bottom="false" style="right: 35rpx;height: 30rpx;"  icon="bookmark"   :iconStyle="{color: colorList()[6]}"></u-cell-item> -->
          </template>
       </uni-list-item>
</uni-list>
      </z-paging>
      
      <z-paging ref="paging1" v-model="lists1" @query="queryList1" :fixed="false" height="86vh" :refresher-enabled="false" v-show = "current == 1">
          
           			<uni-list>
       <uni-list-item   v-for="(item, index) in lists1" :key="index" 
           @click="navto(item)" :clickable="true"    direction="column"  style="height: 120rpx;"
             >  
      
             		<template v-slot:body >
                  <!-- <view style="font-size: 32rpx;" >{{item.claName}}</view> -->
                  <u-cell-item :title="item.claName+''" :titleStyle="{fontSize : '35rpx'}"   icon="bell"  :arrow="false" :border-bottom="false" style="right: 35rpx;height: 30rpx;" hover-class = "none"
                   :iconStyle="{color:  '#000000'}"
                  ></u-cell-item>
             		</template>
                <template v-slot:footer  >
                  <u-cell-item :title="'学生人数：'+ item.capacity +'人'"    icon="account-fill"  :arrow="false" :border-bottom="false" style="right: 35rpx;height: 30rpx;" hover-class = "none"
                   :iconStyle="{color:  '#ffaa00'}"
                  >
                             <u-cell-item :title="'课程：'+ item.coursename+''"    icon="bookmark"    :arrow="false" :border-bottom="false" style="left: 30rpx;height: 30rpx;"    :iconStyle="{color:  '#66CCCC'}" hover-class = "none"></u-cell-item>
                    
                    
                  </u-cell-item>
      
             <!--      <u-cell-item :title="'课程：'+ claTime.courseName+''"   :arrow="false" :border-bottom="false" style="right: 35rpx;height: 30rpx;"  icon="bookmark"   :iconStyle="{color: colorList()[6]}"></u-cell-item> -->
                </template>
             </uni-list-item>
      </uni-list>
            </z-paging>
            
            <z-paging ref="paging2" v-model="lists2" @query="queryList2" :fixed="false" height="86vh" :refresher-enabled="false" v-show = "current == 2" >
                
                 			<uni-list>
             <uni-list-item   v-for="(item, index) in lists2" :key="index" 
                 @click="navto(item)" :clickable="true"    direction="column"  style="height: 120rpx;"
                   >  
            
                   		<template v-slot:body >
                        <!-- <view style="font-size: 32rpx;" >{{item.claName}}</view> -->
                        <u-cell-item :title="item.claName+''" :titleStyle="{fontSize : '35rpx'}"   icon="bell"  :arrow="false" :border-bottom="false" style="right: 35rpx;height: 30rpx;" hover-class = "none"
                         :iconStyle="{color:  '#000000'}"
                        ></u-cell-item>
                   		</template>
                      <template v-slot:footer  >
                        <u-cell-item :title="'学生人数：'+ item.capacity +'人'"    icon="account-fill"  :arrow="false" :border-bottom="false" style="right: 35rpx;height: 30rpx;"
                         :iconStyle="{color:  '#ffaa00'}"  hover-class = "none"
                        >
                                   <u-cell-item :title="'课程：'+ item.coursename+''"    icon="bookmark"    :arrow="false" :border-bottom="false" style="left: 30rpx;height: 30rpx;"    :iconStyle="{color:  '#66CCCC'}"  hover-class = "none"></u-cell-item>
                          
                          
                        </u-cell-item>
            
                   <!--      <u-cell-item :title="'课程：'+ claTime.courseName+''"   :arrow="false" :border-bottom="false" style="right: 35rpx;height: 30rpx;"  icon="bookmark"   :iconStyle="{color: colorList()[6]}"></u-cell-item> -->
                      </template>
                   </uni-list-item>
            </uni-list>
                  </z-paging>
   
    
    </view>
</template>

<script>

import DaDropdownVue2 from '../../../components/da-dropdown-vue2/index.vue'

export default {
  components: { DaDropdownVue2 },
  data() {
    return {
      searchTitle:'',
      current : 0,
      list: [{
        name: '班课'
      }, {
        name: '一对一',
      },{
        name: '我的班级',
      }],
      lists: [],
      lists1: [],
      lists2: [],
      searchFlag: false,

      dropdownMenuList: [
      // 唯一性。存在 search 就会显示搜索框
        {
          title: '搜索',
          type: 'search',
          prop: 'god0',
        // value: '哈哈哈', // 默认内容 哈哈哈
        },

      

      ],
    }
  },


  mounted() {
  },
  methods: {
    change(index) {
      
      this.current = index;
    },

    navto(item){
      uni.navigateTo({
        url: '/pages/sys/cla/detail?data='+encodeURIComponent(JSON.stringify(item))
      })
      
    },
    search(){
      if(this.current == 0){
        this.searchFlag = true
         this.$refs.paging.reload()
      }
      else if(this.current == 1){
       this.searchFlag = true
        this.$refs.paging1.reload()
      }
      else if(this.current == 2){
       this.searchFlag = true
        this.$refs.paging2.reload()
      }
      
    },
changeList(){
  return "{display:none;}"
},
    queryList(pageNo, pageSize){
      let searchs = ''
      if(this.searchFlag){
        searchs = this.searchTitle
        this.searchFlag = false
      }
                  const params = {
                      num: pageSize,
                      page: pageNo,
                        classType: '2',
                        claName : searchs
                  }
                  this.$u.api.ClaListapp(
                    params
                  ).then(response => {
                    if (response.code == 200) {
                        this.$refs.paging.complete(response.data);
                    } else {
                      uni.showToast({
                        title: '服务器出错',
                        icon: 'error'
                      })
                  
                  
                    }
                  })
                  // 此处请求仅为演示，请替换为自己项目中的请求
              },
              queryList1(pageNo, pageSize){
                let searchs = ''
                if(this.searchFlag){
                  searchs = this.searchTitle
                  this.searchFlag = false
                }
                            const params = {
                                num: pageSize,
                                page: pageNo,
                                classType: '0',
                                 claName : searchs
                            }
                            this.$u.api.ClaListapp(
                              params
                            ).then(response => {
                              if (response.code == 200) {
                                  this.$refs.paging1.complete(response.data);
                              } else {
                                uni.showToast({
                                  title: '服务器出错',
                                  icon: 'error'
                                })
                            
                            
                              }
                            })
                            // 此处请求仅为演示，请替换为自己项目中的请求
                        },
                        queryList2(pageNo, pageSize){
                          let searchs = ''
                          if(this.searchFlag){
                            searchs = this.searchTitle
                            this.searchFlag = false
                          }
                                      const params = {
                                          num: pageSize,
                                          page: pageNo,
                                          staffId : this.vuex_teacherId ,
                                           claName : searchs
                                      }
                                      this.$u.api.ClaListapp(
                                        params
                                      ).then(response => {
                                        if (response.code == 200) {
                                            this.$refs.paging2.complete(response.data);
                                        } else {
                                          uni.showToast({
                                            title: '服务器出错',
                                            icon: 'error'
                                          })
                                      
                                      
                                        }
                                      })
                                      // 此处请求仅为演示，请替换为自己项目中的请求
                                  },
    

    handleConfirm(v, selectedValue) {
    },
    handleClose(v, callbackMenuList) {
    },
    handleOpen(v) {
    },
  },
}
</script>

<style lang="scss">
.dadropdown-exp {
  padding: 200px 0;
  text-align: center;
}
.marigntop{
  top: 0;
  margin-top: 500rpx;
}

</style>
